<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:insert="common.html"></div>
<div id="toolbar" shiro:hasPermission="Y">
<input type="button" onclick="insertInfo()" class="btn btn-info" value="增加"/>
</div>
<table id="table"></table>
</body>
</html>
<script>
    $(function (){
      $('#table').bootstrapTable({
        //请求地址
        url: '/person/getInfo',
        method : "GET",
        striped: true,//是否显示行间隔色
        cache: false,//是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性
        pagination: true,//是否显示分页（*）
        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
        strictSearch: true,//严格搜索
        showColumns: true,                  //是否显示所有的列（选择显示的列）
        showRefresh: true,                  //是否显示刷新按钮
        clickToSelect: true,                //是否启用点击选中行
        //列
        columns: [
          {
            checkbox: true,
            visible: true                  //是否显示复选框

          },{
            //实体类属性
            field: 'pid',
            //表头
            title: 'ID'
          }, {
            field: 'pname',
            title: '用户'
          },{
            field: 'pid',
            title: "操作",
            width:120,
            align : "center",
            formatter : function (value, row, index) {
              var id = row.pid;
              var result = "";
              result += "<a href='javascript:toUpdate("+id+")' class='btn btn-xs blue'  title='编辑'><span class='glyphicon glyphicon-pencil'></span></a>";
              result += "<a href='javascript:deleteInfoById("+id+")' class='btn btn-xs red'  title='删除'><span class='glyphicon glyphicon-remove'></span></a>";

              return result;
            }
          }
        ]
      });
    })

    function deleteInfoById(pid){
      if(confirm("确认删除吗?")){
        $.ajax({
          url: "/person/deleteInfo?pid="+pid,
          type: "post",
          dataType: "json",
          success: function (data) {
            toastr.success("删除成功");
              location.reload();
          },
          error: function (data) {
            alert("网络连接失败")
          }
        })
      }

    }

    function toUpdate(pid){
      BootstrapDialog.show({
        title: '提示',
        message: $('<div></div>').load('/person/toUpdate/'+pid),
        size: BootstrapDialog.SIZE_WIDE,
        buttons: [{
          label: '取消',
          action: function (dialog) {
            dialog.close();
          }
        }, {
          label: '确定',
          action: function (dialog) {
            $.ajax({
              url: "/person/updateInfo",
              type: "post",
              dataType: "json",
              data: $("#user_update_form").serialize(),
              success: function (data) {
                toastr.success("修改成功");
                dialog.close();
                  location.reload();
              },
              error: function (data) {
                alert("网络连接失败")
              }
            })
          }
        }]
      });
    }

    function insertInfo(){
      BootstrapDialog.show({
        title: '提示',
        message: $('<div></div>').load('/person/toAdd'),
        size: BootstrapDialog.SIZE_WIDE,
        buttons: [{
          label: '取消',
          action: function (dialog) {
            dialog.close();
          }
        }, {
          label: '确定',
          action: function (dialog) {
            $.ajax({
              url: "/person/addInfo",
              type: "post",
              dataType: "json",
              data: $("#user_add_form").serialize(),
              success: function (data) {
                toastr.success("增加成功");
                dialog.close();
                  location.reload();
              },
              error: function (data) {
                alert("网络连接失败")
              }
            })
          }
        }]
      });
    }

    function getData(){
      $("#table").bootstrapTable("refresh")
    }
</script>